<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>商品分类管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .layui-table-cell{
      text-align:center;
      height: auto;
      white-space: normal;
    }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">商品名称</label>
              <div class="layui-input-inline">
                <input id="input1" type="text" name="name" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button id="searchBtn" type="button" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 新增顶级分类 </button>
      </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="add">增下级</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>

    </script>
  </div>
</div>
<script id="categoryTemplate" type="text/html">
  <form class="layui-form" lay-filter="categoryForm">
    <div class="layui-form-item">
      <label class="layui-form-label">商品名称</label>
      <div class="layui-input-inline">
        <input type="hidden" name="id"/>
        <input id="parentId" type="hidden" name="parentId" value="0"/>
        <input  type="text" name="name" autocomplete="off" placeholder="请输入商品分类" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">排序号</label>
      <div class="layui-input-inline">
        <input type="hidden" name="id"/>
        <input type="text" name="sequence" autocomplete="off" placeholder="请输入排序号" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">附件</label>
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传附件</button>
        <div style="margin: 10px 10px 10px 110px" class="layui-upload-list">
          <img width="95px" height="95px" class="layui-upload-img" id="demo1">
          <p id="demoText"></p>
        </div>
        <div style="width: 95px; margin: 10px 10px 10px 110px;" >
          <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
          </div>
        </div>
        <input type="hidden" id="aaaa" name="imgPath" autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="saveBtn" type="button" class="layui-btn" >立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js"></script>
<script th:inline="none" type="text/javascript">
  layui.use(["table", "layer", "laydate", "form","upload","common","element"], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var form = layui.form;
    var upload=layui.upload;
    var element=layui.element;

    $("#searchBtn").on("click", function () {
    table.render({
      elem: '#currentTableId',
      url: '/category/list',
      toolbar: '#toolbarDemo',
      where: {keyword: $("#input1").val()},
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox", width: 50},
        {field: 'id',  title: 'ID', sort: true},
        {field: 'name',  title: '商品名称'},
        {field: 'parentId', title: '父类ID', sort: true},
        { title: "附件",
          field: "imgPath",
          templet:function (d) {
            // console.log(d.avatar)
            if (d.imgPath!==''){
              return '<img src="'+d.imgPath+'" style="height: 50px;width: 50px"/>'
            }else {
              return ''
            }
          },
          align: "center"
        },
        {field: 'sequence', title: '排序'},
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line'
    });
    });
    $("#searchBtn").click();

    $("body").on("click", "#saveBtn", function () {
      var data = form.val("categoryForm");
      //console.log(data);
      if(data.name==null||data.name===""){
        layer.msg("商品分类不能为空");
        return false;
      };

      $.post("/category/save", data, function (result) {
        if(result.code==0){
          layer.closeAll();
          $("#searchBtn").click();
        }else{
          layer.closeAll();
        }
        $("#searchBtn").click();
      });
    });

    function renderUpload() {
      var uploadInst = upload.render({
        elem: '#test1'
        ,url: '/category/avatar' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#demo1').attr('src', result); //图片链接（base64）
          });
          element.progress('demo', '0%'); //进度条复位
          layer.msg('上传中', {icon: 16, time: 0});
        }
        ,done: function(res){
          //如果上传失败
          if(res.code > 0){
            return layer.msg('上传失败');
          }
          //上传成功的一些操作

          $("#aaaa").val(res.data.imgPath);

          //……
          $('#demoText').html(''); //置空上传失败的状态
        }
        ,error: function(){
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
          });
        }
        //进度条
        ,progress: function(n, elem, e){
          element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
          if(n == 100){
            layer.msg('上传完毕', {icon: 1});
          }
        }
      });
    }


    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {  // 监听添加操作
        layer.open({
          type: 1,
          area: ["400px", "320px"],
          title: "新增顶级分类",
          content: $("#categoryTemplate").html()
        });
        renderUpload();

      }
    });

    //监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });

    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        $.get("/category/"+data.id,function (m) {
          layer.open({
            type:1,
            area:['400px','400px'],
            title:"编辑商品分类",
            content:$("#categoryTemplate").html()
          })
          form.val("categoryForm",m)
          $("#demo1").attr("src",m.imgPath);
          renderUpload();
          /*upload.render({
            elem:'#avatar' ,//绑定元素
            url: '/category/imgPath',//上传接口
            done: function (res) {
              if (res.code ==0) {
                $("#demo1").attr("src",res.data.imgPath);
              }
            }
          });*/

        })

      } else if (obj.event === 'delete') {

          layer.confirm("您确定要删除该菜单吗？",function () {
            $.post("/category/del?id="+data.id,function () {
              $("#searchBtn").click();
              layer.closeAll();
            });
          });

      }else if (obj.event === 'add'){
        layer.open({
          type: 1,
          area: ["400px", "320px"],
          title: "新增顶级分类",
          content: $("#categoryTemplate").html()
        });
        renderUpload();
        $("#parentId").val(data.id);
      }
    });

  });
</script>

</body>
</html>